<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control"  content="no-transform">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>报销宝精选商城</title>
    <link href="/statics/view/css/shop_common.css" rel="stylesheet" type="text/css" />
    <link href="/statics/view/css/shop_layout.css" rel="stylesheet" type="text/css" />
    <link href="/statics/flickity/css/flickity.css" rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css">
        .gallery-cell {
              width: 100%;
        }
    </style>
</head>
<body>
<script src="//ms2-m.vipstatic.com/js/lib/a478accf5e.jquery-2.1.0.min.js"></script>
<div class="wfqDwVOe hide">
    <div class="u-download-bar">
        <span class="u-download-close"></span>
        <div class="u-download-enter">
            <span class="u-download-text">下载</span>
            <span class="i-vip"></span>
            <p class="u-download-zh">下载手机app<br>话费理财购物更方便！</p>
        </div>
    </div>
</div>
<header id="header" class="u-header clearfix">
    <div class="u-hd-left f-left">
        <a href="javascript:void(0)" mars_sead="brand-list-back_btn" class="J_backToPrev"><span class="u-icon-px i-hd-back"></span></a>
    </div>
    <div class="u-hd-tit"><span> ${product.name}</span></div>
    <div class="u-hd-right f-right"><a href="index.html" mars_sead="nav_home_btn"><span class="u-icon-px i-hd-home"></span></a></div>
</header>
<!--产品详细页的图片及介绍-->
<div class="container pro-detail-box">
    <div id="goods_detail" class="p-relative">
        <div id="goods_images" class="carousel" style="overflow: hidden; visibility: visible; margin-top: 10px;">
            <ul data-cartimg="img" id="productImg-gallery"  class="gallery">
               [#list product.productImages as productImage]
                     <li class="gallery-cell"><span><img src="${productImage.medium}" data-original="" data-onerror="" alt="" class="smallImg active" mars_sead="product_big_pic"></span></li>
                [/#list]
            </ul>
        </div>
        <div class="goods_info">
            <form name="cartForm" action="index.php?m=flow&amp;act=addtocart" method="post">
                <input type="hidden" name="channel_id" value="">
                <input type="hidden" name="product_id" value="76189039">
                <input type="hidden" name="cat_id" value="">
                <input type="hidden" name="warehouse" value="VIP_HZ">
                <input type="hidden" name="product_name" value="">
                <input type="hidden" name="small_image" value="http://a.vimage1.com/upload/merchandise/pdc/089/288/8441510845971288089/0/GY-6959648878912-5.jpg">
                <input type="hidden" name="agio" value="3.1折">
                <input type="hidden" name="back_url" value="">
                <h1>
                    ${product.name}
                </h1>
                <!-- 价格部分start -->
                <div class="u-detail-pricebox clearfix">
                    <!-- 专享价提示文案 -->
                    <div class="f-left">
                        <span class="u-detail-price">¥${product.price}</span>
                        <span class="u-detail-mprice">¥${product.marketPrice}</span>
                    </div>
                </div>
                <a class="u-brand-ent" href="crm.html?pid=76189039" mars_sead="goods-detail-consultclick_btn">
                    <p class="u-title">购物咨询</p>
                    <span class="u-icon i-arrow-right"></span>
                </a>
                <a class="u-brand-ent" href="crm.html?pid=76189039" mars_sead="goods-detail-consultclick_btn">
                    <p class="u-title">购物评论</p>
                    <span class="u-icon i-arrow-right"></span>
                </a>
                <div class="u-detail-vipmoney">
                    <p><span class="u-name-slogan">宝币</span>购买最多可获得<span class="c-red">${product.price/100}个</span>宝币</p>
                </div>
            </form>
            <!-- 详情页 -->

            <a href="javascript:;" data-merchandise="normal" class="up_more u-loading J_detail_more" data-action="true" style="display: none;">
                <div class="u-spinner mr-r10">
                    <div class="bounce1"></div>
                    <div class="bounce2"></div>
                    <div class="bounce3"></div>
                </div>
                <span style="display: none;">100%正品保证</span></a>
            <div class="detail-con">
                <div id="detail-info" class="detail-info hide" style="display: block;"><!-- 商品详情 -->
                    <div class="product_detail">
                        <div class="tab_content pro_detail_info">
                            <div class="M_detail" style="width:1000px">
                                <div class="M_detailCon">
                                    <p class="dc_tit" id="J_proParam_scroll">商品参数<i class="far">Detail</i></p>
                                    <div class="dc_info clearfix">
                                        ${product.introduction}
                                    </div>
                                    <p class="dc_tit" id="J_proImg_scroll">商品图片<i class="far">Image</i></p>
                                    <div class="dc_img">
                                        [#list product.productImages as productImage]
                                            <img src="${productImage.large}" width="320">
                                        [/#list]
                                        <div class="dc_img_detail"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div></div>
            </div>
        </div>
    </div>
</div>

<!-- wap不支持预付商品购买 -->
<!--固定在页面底部浮动的购买按钮-->
<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container detail-box e-empty">
        <div class="navbar-header">
            <a href="/shop/cart/list">
                <i class="num-cart hide"></i>
                <i class="u-icon i-cart-gray"></i>
                <i class="countdown-txt hide">商品将预留</i>
                <i class="num-cunt" data-carttime="-1" data-ctime="true"></i>
            </a>
        </div>
        <div class="navbar-brand">
            <a class="btn btn-large btn-purple btn_add_to_cart" data-type="" data-shopcarthide="true" mars_sead="product_add_cart_btn" data_mars="prd_id:76189039" data-animate="true" data-addjump="1" data-addcart="true">加入购物车</a>
        </div>
    </div>
</div>

<a href="#top" class="u-backtop" mars_sead="home_foot_top_btn" style="right: 10px; bottom: 68px;">
    <span class="u-icon-px i-backtop"></span>
</a>
<!--以下是浮于显示屏左下角的购物袋-->

<div class="modal hide" id="w-modal" data-modal="depot">
    <div class="modal-header">
        <h3 class="tit"><span class="hj"></span>选择收货地址，火速配送哦</h3>
    </div>
    <div class="modal-body">
        <div class="modal-message">
            <div class="ui-xx clearfix" data-merpos="true" data-hascart="">

            </div>
        </div>
    </div>
    <div class="modal-header">
        <h3 class="tit"><span class="hj"></span>选择最近收货地址，送货更快哦</h3>
    </div>
</div>
<script src="/statics/view/js/shop.js"></script>
<script type="text/javascript" src="/statics/layer.m/layer.m.js"></script>
<script type="text/javascript" src="/statics/flickity/js/flickity.pkgd.min.js"></script>
<script type="text/javascript">
    $(function(){

        $('#productImg-gallery').flickity({
            cellAlign: 'center',
            contain: true
        });

        $(".btn_add_to_cart").click(function(){
            $.ajax({
                url: "/shop/cart/add",
                type: "POST",
                data: {id: ${product.id}},
                dataType: "json",
                cache: false,
                success: function(message) {
                    layer.open({
                        content: message.content,
                        time: 1
                    });
                }
            });
            return false;
        });
    });
</script>


</body>
</html>